<template>
    <div id="noteBox" ref="boxboxbox">   
      <div class="title">
        <span class="line"></span>
        <span>{{$t('wechat.wifi')}}</span>
      </div>
      <el-table
      height="90%"
      :data="tableData"
      border
      style="width: 100%;">
      <el-table-column
        prop="ssid"
        :label="$t('wechat.wifiname')"
        >
      </el-table-column>
      <el-table-column
        prop="psk"
        :label="$t('wechat.wifipass')"
        >
      </el-table-column>
      <el-table-column
        prop="key_mgmt"
        :label="$t('wechat.wifiType')"
        >
      </el-table-column>
      <!-- <el-table-column
        label="操作"
        :show-overflow-tooltip="true"
        >
        <template slot-scope="scope">
          <span v-html="scope.row.content"></span>
          <div><el-button @click="markOrder(scope.row)" size="mini">{{$t('wechat.biaoji')}}</el-button></div>
        </template>
      </el-table-column> -->

    </el-table>
  
    <!-- 无法解析消息类型详情 -->
     <a-modal
        v-model="showModal"
        :footer="null"
        width="80%"
        title="消息详情"
        :maskClosable="false"
        :getContainer="getRefsAff"
        centered
        @ok="() => (showModal = false)"
      >
        <span>{{dataContent}}</span>
      </a-modal>
  
      <!-- 提交标记 -->
      <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
        :maskClosable="false" title="提示" @ok="handleOk">
        <p>{{$t('wechat.biaojibeizhu')}}</p>
        <p><el-input type="textarea" v-model="remark"></el-input></p>
      </a-modal>
      
    </div>
  </template>
  
  <script>
  import { parseTime } from "@/utils/index"
  import print from 'print-js'
  import html2canvas from "html2canvas"
  import { sendMarkOrderApi,getWifiApi } from '@/api/markApi/index'
  
  export default {
    name: "wifiPz2",
    props:['sendData'],
    data(){
      return{
        showRemark:false,
        remark:'',
        id:'',
        tableData:[],
        offset:1,
        showModal:false,
        dataContent:''
      }
    },
    watch:{
      '$store.state.account.note2':function(){
        this.offset=1
        this.init()
      }
    },
    created(){
      this.init()
    },
    methods:{
      getRefsAff(){
        return  this.$refs.callBosMain;
      },
      handleOk(){
          let data={
          model:this.sendData.model,
          isChat:0,
          proof_num:this.sendData.proof_num,
          list_offset:this.offset,
          list_limit:this.limit,
          remark:this.remark,
          class:this.sendData.class,
          label:this.sendData.label,
          id:Number(this.id)
        }
        sendMarkOrderApi(data).then(res=>{
          this.showRemark=false;
          this.$message({
            message: '标记数据成功！',
            type: 'success'
          });
          this.onSearch()
        })
      },
      // 添加标记点
      markOrder(item){
        this.id=item.id;
        this.showRemark=true;
      },
      open(content){
        this.showModal=true
        this.dataContent=content
      },
      getRefsAff(){
        return  this.$refs.boxboxbox
      },
      init(){
        let data={
          proof_num:this.sendData.proof_num,
        //   model:this.sendData.model,
        }
        getWifiApi(data).then(res=>{
          this.tableData=res.data
        })
      },
      formate(date){
        return parseTime(date)
      },
      //打印
      printPdf(){
        html2canvas(document.getElementById('noteBox')).then(function(canvas) {
            var imgageData = canvas.toDataURL("image/png");//把canvas转为base64图片
            print(imgageData, 'image');
        });
      },
    }
  
  }
  </script>
  
  <style scoped>
  .badgeBox{
    width: 50px;
    height: 23px;
    border-radius: 10px;
    color: #fff;
    background: #f56c6c;
    text-align: center;
    line-height: 23px;
    font-size: 12px;
  }
  #noteBox{
    position: relative;
  }
  .title {
    width: 100%;
    height: 50px;
    background: #2b2f3a;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 50px;
    padding-left: 20px;
    color: #fff;
  }
  .line {
    width: 8px;
    height: 100%;
  }
  </style>